<template>
  <div class="songSheet">
    <div class="top">
      <p @click="backward">《 返回</p>
      <div class="bgImg">
        <img :src="coverImgUrl + '?imageView=1&type=webp&thumbnail=253x0'" />
        <div class="cover"></div>
      </div>
      <div class="topDetail">
        <div class="topLeft">
          <img :src="coverImgUrl + '?imageView=1&type=webp&thumbnail=253x0'" />
        </div>
        <div class="topRight">
          <p>{{ name }}</p>
          <div>
            <img
              :src="avatarUrl + '?imageView=1&type=webp&thumbnail=253x0'"
              alt=""
            />
            {{ nickname }}
          </div>
          <div class="description">描述：{{ description }}</div>
        </div>
      </div>
      <!-- 歌单评论和收藏 -->
      <div class="commentAndLike">
        <div class="like" @click="collect(listID)">
          收藏
          <img src="../assets/images/love.png" v-if="!isCollect" />
          <img
            src="../assets/images/love.png"
            class="redLove"
            v-if="isCollect"
          />
        </div>
        <div class="comment">
          <router-link :to="`/comments/${listID}`"
            ><img src="../assets/images/info.png" />{{
              totalComments
            }}</router-link
          >
        </div>
      </div>
    </div>
    <p class="title">歌曲列表</p>
    <ul class="song" v-if="songs.length > 0">
      <li v-for="(s, index) in songs" :key="s.id">
        <SongItem :item="s" @add-list="addMusicList(songs)">{{
          (index + 1) | formatNum
        }}</SongItem>
      </li>
    </ul>
    <Loading v-if="isLoading"></Loading>
    <div v-if="!isLoading" class="loadingmore" @click="loadMore">加载更多 ></div>
  </div>
</template>

<script>
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";
export default {
  data() {
    return {
      listID: null,
      coverImgUrl: null,
      name: null,
      avatarUrl: null,
      nickname: null,
      page: 1,
      songs: [],
      isLoading: true,
      description: null,
      totalComments: null,
      collectHistory: [],
      isCollect: false,
    };
  },

  methods: {
    addMusicList(songs) {
      let newArray = [];
      songs.map((d) => {
        let find = false;
        for (let n of newArray) {
          if (n.id == d.id) {
            find = true;
            break;
          }
        }
        if (!find) newArray.push(d);
      });

      this.$root.musicStore.musicList = newArray;
    },

    // 返回上一页
    backward() {
      this.$router.go(-1);
    },
    // 加载更多
    loadMore() {
      this.page++;
      if (this.page >= 10) {
        return false;
      }
      this.isLoading = true;
      this.showMusic();
    },
    collect(val) {
      this.isCollect = !this.isCollect;
      // console.log(val)
      if (!this.collectHistory.includes(val)) {
        this.collectHistory.unshift(val);
        localStorage.setItem(
          "collectHistory",
          JSON.stringify(this.collectHistory)
        );
        // console.log("不存在")
      } else {
        let i = this.collectHistory.indexOf(val);
        this.collectHistory.splice(i, 1);
        this.collectHistory.unshift();
        localStorage.setItem(
          "collectHistory",
          JSON.stringify(this.collectHistory)
        );
        // console.log("存在")
      }
    },
    showMusic() {
      this.$http
        .get("/playlist/detail?id=" + this.listID)
        .then((data) => {
          let trackIDS = data.data.playlist.trackIds.slice(
            (this.page - 1) * 10,
            this.page * 10
          );
          // console.log(data)
          this.coverImgUrl = data.data.playlist.coverImgUrl;
          this.name = data.data.playlist.name;
          this.avatarUrl = data.data.playlist.creator.avatarUrl;
          this.nickname = data.data.playlist.creator.nickname;
          this.description = data.data.playlist.description;
          let ids = trackIDS.map((d) => {
            return d.id;
          });
          return ids.join(",");
        })
        .then((ids) => {
          //   获取数据详情
          this.$http
            .get("http://music.kele8.cn/song/detail?ids=" + ids)
            .then((songData) => {
              this.isLoading = false;
              songData.data.songs.map((d) => {
                d.song = {
                  artists: d.ar,
                };
                this.songs.push(d);
                return d;
              });
              // console.log(1111111111111111111111)
            });
        });
    },
    // 评论
    showComments() {
      this.$http.get("/comment/playlist?id=" + this.listID).then((data) => {
        this.totalComments = data.data.total;
      });
    },
  },
  mounted() {
    if (JSON.parse(localStorage.getItem("collectHistory"))) {
      this.collectHistory = JSON.parse(localStorage.getItem("collectHistory"));
    }
    if (localStorage.getItem("collectHistory")) {
      if (localStorage.getItem("collectHistory").includes(this.listID)) {
        this.isCollect = true;
      }
    }
  },
  components: {
    SongItem,
    Loading,
  },
  filters: {
    formatNum(val) {
      if (val < 10) {
        return "0" + val;
      }
      if (val >= 10) {
        return val;
      }
    },
  },
  created() {
    this.listID = this.$route.params.id;
    // console.log(this.listID)
    this.showMusic();
    this.showComments();
  },
};
</script>

<style lang="less">
.songSheet {
  .top {
    width: 100%;
    height: 220px;
    // height: 243px;
    padding: 5px 15px;
    box-sizing: border-box;
    p {
      color: white;
      // font-size: 14px;
    }
    .bgImg {
      // height: 243px;
      height: 220px;
      width: 100%;
      position: absolute;
      z-index: -1;
      top: 0px;
      left: 0px;
      overflow: hidden;
      img {
        width: 200%;
      }
      .cover {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0px;
        left: 0px;
      }
    }
    .topDetail {
      margin-top: 15px;
      margin-left: 10px;
      display: flex;
      justify-content: space-around;
      .topLeft {
        flex: 1.4;
        img {
          width: 100%;
          border-radius: 20px;
          border: 1px solid white;
        }
      }
      .topRight {
        margin-left: 15px;
        flex: 2;
        p {
          color: white;
          // font-size: 18px;
        }
        div {
          margin-top: 13px;
          font-size: 14px;
          img {
            width: 25px;
            border-radius: 50%;
            vertical-align: middle;
          }
          color: white;
        }
        .description {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 14px;
        }
      }
    }
    .commentAndLike {
      text-align: center;
      width: 100%;
      justify-content: space-between;
      padding: 5px 5px;
      display: flex;
      .like {
        flex: 1;
        color: white;
        border-radius: 10px;
        justify-content: center;
        img {
          width: 16px;
          vertical-align: bottom;
          padding: 2px 3px 2px 1px;
          // background-color: #cc99cc;
          border-radius: 5px;
        }
      }
      .comment {
        flex: 1;
        color: white;
        a {
          color: white;
          text-decoration: none;
          img {
            width: 21px;
            vertical-align: bottom;
            margin-right: 2px;
          }
        }
      }
    }
  }
  .title {
    background-color: #eeeff0;
    padding: 5px 10px;
    font-size: 14px;
  }
  .song {
    // background-color: white;
    li {
      width: 100%;
    }
  }
  .loadingmore {
    // background-color: bisque;
    line-height: 20px;
    color: #7b7b7b;
    text-align: center;
  }

  .redLove {
    background-color: red;
    color: red;
  }
}
</style>